<template>
  <div class="address">
    <ul class="list" v-if="haveAddress">

      <li class="clearFix ok-list" v-for="(item,index) in addresses">
          <div class="fl ">
            <p>{{item.name}}</p>
            <p>{{item.telephone}}</p>
            <p>{{item.provice_name}}{{item.city_name}}{{item.district_name}}{{item.address}}</p>
          </div>
          <span class="edit" @click = "gotoAddress('/me/add?addressId='+item.address_id)">
              <img src="../../assets/me/a2.png" alt="">
          </span>
      </li>


    </ul>

    <div class="next-btn">
      <mt-button type="danger" size="large" @click = "gotoAddress('/me/add')"><img src="../../assets/me/a1.png" alt="" class="add-ico"><span class="text">新增地址</span></mt-button>
    </div>

    <!--<div class="clearFix" @click = "gotoAddress('/me/add')">-->
      <!--<p class="jia">+</p>-->
      <!--<b>新增地址</b>-->

    <!--</div>-->

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
export default {
  name: 'Address',
  data () {
    return {
      haveAddress: false,
      addresses:{}
    }
  },
  mounted:function(){
    this.getAddress();
  },
  methods: {
     gotoAddress(path){
       this.$router.push(path)
     },
     getAddress(){
       var getAddressData = {};
       getAddressData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
       var _this = this;

       $.ajax({
         type:'post',
         url: RouteMap.getAddress,
         data:getAddressData,
         success:function(res){
           if(res.code == 200){
             if(Object.keys(res.data.addresses).length>0){
                _this.haveAddress = true;
                _this.addresses = res.data.addresses;
              }
           }
           else{
             Toast(res.msg)
           }
         }
       })
     },
     delAddress(){
       var delAddressData = {};
       delAddressData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
       delAddressData.address_id = '';
       var _this = this;

       $.ajax({
         type:'post',
         url: RouteMap.delAddress,
         data:delAddressData,
         success:function(res){
           if(res.code == 200){
             Toast(res.msg)
           }
           else{
             Toast(res.msg)
           }
         }
       })
     }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .address{
    padding: 1rem 0.8rem;
  }
.list {
  background:#fff;
  width:100%;
  box-sizing:border-box;
  margin-top:.3rem;
  padding:0 .4rem;
  font-size:.7rem;
}
.list li{
  }
.list li:last-child{
    border-bottom:none;
    }
.list li.ok-list{
  padding:1rem;
  background: url("../../assets/me/a3.png");
  background-size: 100% 100%;
  font-size: 0.6rem;
  margin-top: 0.5rem;
}
  .list li.ok-list .fl{
    width: 10rem;
    word-wrap: break-word;
    word-break: break-all;
  }
.list li.ok-list p{
  padding-bottom:.2rem;

  }
.list li.ok-list .icon{
  margin:.4rem .3rem 0 0;
  border-radius:50%;
}

.list li b{
    float:left;
    color:#000;
    line-height:2rem;

}
.list li .edit{
    line-height:1rem;
    font-size:.9rem;
    color:#aaa;
    float:right;
    margin-top: 1.9rem;
}
  .list li .edit img{
    width: .7rem;
  }
  .add-ico{
    width: 0.5rem;
    margin-right: 0.2rem;
  }
  .next-btn .add-ico,.next-btn .text{
    vertical-align: middle;
    color: #1c1c1c;
  }
  .mint-button--danger{
    background: #f5f5f5;
  }
</style>
